<!-- 更换车牌号 -->
<template>
  <a-button class="add-supplier-btn" size="mini" type="text" @click="show">
    <template #icon>
      <icon-plus />
    </template>
    {{ title }}
  </a-button>
  <a-modal
    v-model:visible="showModal"
    @close="onClose"
    @before-ok="onConfirm"
    :ok-loading="loading"
    :title="title"
    :mask-closable="false"
    class="modal-dialog-wrapper"
    unmount-on-close
    width="300"
  >
    <page-form :model="form" layout="vertical" :rules="rules" ref="formRef">
      <a-row class="typeName">
        <a-col :span="3.2" class="typeNameLabel">供应商类型：</a-col>
        <span class="typeNameValue">{{ supplierTypeList }}</span>
      </a-row>
      <page-form-item field="supplierName" label="供应商名称" required>
        <a-input placeholder="请输入" allow-clear v-model="form.supplierName" max-length="30" />
      </page-form-item>
    </page-form>
  </a-modal>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { supplierSave } from '@/api/market/supplier'

  const props = defineProps({
    typeText: {
      type: String,
      default: '',
    },
    // 供应商类型 支持多种
    supplierType: {
      type: [String, Array],
      default: '',
    },
  })
  const emits = defineEmits(['addOk'])

  const supplierTypeEnum = [
    {
      name: '维修',
      value: '0',
    },
    {
      name: '保养',
      value: '1',
    },
    {
      name: '汽车销售',
      value: '3',
    },
    {
      name: '设备供应商',
      value: '5',
    },
    {
      name: '年检厂',
      value: '6',
    },
    {
      name: '保险公司',
      value: '7',
    },
    {
      name: '其他',
      value: '9',
    },
    {
      name: '代驾公司',
      value: '10',
    },
  ]

  const title = computed(() => {
    if (props.typeText == '保险') {
      return '新增保险公司'
    } else if (props.typeText == '供应商') {
      return '新增供应商'
    } else {
      return `新增${props.typeText}厂`
    }
  })

  const supplierTypeList = computed(() => {
    return getTypes()
  })

  const getTypes = () => {
    const arr = Array.isArray(props.supplierType) ? props.supplierType : [props.supplierType]
    const result = []
    arr.forEach((item) => {
      const obj = supplierTypeEnum.find((i) => i.value == item)
      if (obj) {
        result.push(obj.name)
      }
    })
    return result.join('、')
  }

  const formRef = ref()
  const showModal = ref(false)
  const loading = ref(false)
  const rules = {
    supplierName: [{ required: true, message: '请输入供应商名称' }],
  }
  const form = ref({
    supplierName: '',
  })
  const show = () => {
    showModal.value = true
  }

  const onClose = () => {
    showModal.value = false
    form.value = {}
  }

  const validateFn = () => {
    return new Promise((resolve, reject) => {
      formRef.value.validate((error) => {
        if (error) {
          console.log(error)
          reject()
        } else {
          resolve()
        }
      })
    })
  }

  const onConfirm = (done) => {
    return new Promise((resolve, reject) => {
      validateFn()
        .then(() => {
          form.value.supplierType = props.supplierType + ''
          supplierSave(form.value)
            .then((res) => {
              emits('addOk', res.result)
              onClose()
              done()
              resolve()
            })
            .catch(() => {
              reject()
            })
        })
        .catch(() => {
          reject()
        })
    })
  }

  defineExpose({
    show,
  })
</script>

<style lang="less" scoped>
  .add-supplier-btn {
    font-size: 14px;
    padding: 0;
  }
  .typeName {
    margin-bottom: 20px;
  }
  .typeNameLabel {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #4e5969;
    line-height: 22px;
    text-align: left;
  }
  .typeNameValue {
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #1d2129;
  }
</style>
